<template>
  <div class="app">
    <!-- title -->
    <div>新闻列表管理</div>
    <!-- input -->
    <div>
      <input type="text" class="inputs" />
      <input type="text" class="inputs" />
      <button>添加</button>
    </div>
    <!-- table -->
    <table>
      <thead>
        <tr>
          <th>图片</th>
          <th>标题</th>
          <th>内容</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in list" :key="index">
          <td>
            <img :src="item.img_url" alt />
          </td>
          <td>{{item.title}}</td>
          <td>{{item.contnet}}</td>
          <td>{{item.date}}</td>
          <td>删除</td>
        </tr>
      </tbody>
    </table>
    <!-- button -->
    <div>
      <button class="btn" @click="prevPage">上一页</button>
      <button class="btn" @click="nextPage">下一页</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      list: [],
      pageNum: 1,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      // console.log(12);
      axios
        .get("/api/get/res", {
          // params是路由传参
          params: {
            pageindex: this.pageNum,
            pagesize: 10,
          },
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.list;
        });
    },
    nextPage() {
      this.pageNum++;
      this.getData();
    },
    prevPage() {
      this.pageNum--;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
table,
table tr th,
table tr td {
  border: 1px solid #0094ff;
}
table {
  // width: 200px;
  width: 80%;
  min-height: 25px;
  line-height: 25px;
  text-align: center;
  border-collapse: collapse;
}
.btn {
  border: 0;
  margin-top: 10px;
  margin-right: 10px;
  border-radius: 4px;
  background-color: rgb(209, 19, 98);
  outline: 0;
  &:hover {
    background-color: aqua;
  }
}
.inputs {
  border: 0;
  border-bottom: 4px solid rgb(41, 221, 110);
  outline: 0;
  margin-right: 30px;
  margin-bottom: 20px;
}
</style>